<template>
    <div class="upload">
        <el-upload
            :action="actionUrl"
            :fileList="imgList"
            :headers="headers"
            :data="dataList"
            :multiple="true"
            :before-upload="beforeUpload"
            :on-success="succUpload"
            list-type="picture-card">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <video v-if="video" controls="controls" class="el-upload-list__item-thumbnail">
                    <source :src="file.url" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <img v-else
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                        >
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                        >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <video v-if="video" controls="controls" style="width:100%;">
                    <source :src="dialogImageUrl" width="100%" type="video/mp4">
                    Your browser does not support the video tag.
            </video>
            <img v-else width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {formatDate} from '@/assets/js/utils.js'
    export default {
        name:'upload',
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                imgList: [],
                
                actionUrl:'/api/file/upload',
                listUrl:'fileList',
                deleteUrl:'fileDelete',

                headers:{}
            }
        },
        props:['dataList','video',"productInfo","id"],
        methods: {
            //获取图片列表
            fileList() {
                let dataList = this.dataList;
                if(!dataList){
                    return
                }
                let param = dataList;
                this.$api[this.listUrl]({param},res=>{
                    let list = res.list;
                    if(this.productInfo){
                        this.imgList = list;
                    }else{
                        list.map(e=>{
                            e.url = e.filePath;
                            e.name = e.fileName;
                            return e;
                        });
                        this.imgList = list;
                    }
                })
            },
            // 删除图片
            handleRemove(file) {
                console.log(file);
                let id = file.id;
                if(id == undefined){
                    id = file.response.fileRecord.id;
                }
                let param = {
                    id: id
                }
                this.$api[this.deleteUrl]({param},()=>{
                    this.$message.success('删除成功！')
                    this.fileList();
                })
            },
            succUpload(file) {
                console.log('succ-file',file);
                if(this.productInfo){
                    let {filePath} = file.fileRecord;
                    this.propAdd(filePath);
                }
            },
            beforeUpload(file){
                console.log('beforeUpload-file',file)
            },
            propAdd(url){
                let param = {
                    id: this.id,
                    url: url,
                    type: this.dataList.type,
                    userId: this.dataList.userId,
                    created: formatDate('yyyy-MM-dd HH:mm:ss', new Date()),
                }
                this.$api.prodAdd({param,method:'post'},(res)=>{
                    console.log('prodAdd-res',res);
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        },
        created () {
            // console.log('process.env.NODE_ENV', process.env.NODE_ENV);
            if(process.env.NODE_ENV){
                let baseUrl = process.env.VUE_APP_baseUrl;
                this.actionUrl = baseUrl + this.actionUrl;
            }
            if(this.productInfo){
                this.listUrl='prodList';
                this.deleteUrl='prodDelete';
            }
            this.headers = {Authorization:localStorage.Authorization};
            this.fileList();
        },
    }
</script>

<style lang="less" scoped>

</style>